<template>
	<view class="fill-width-height flex-col pagecontent" :class="$thatThemeClassName">
		<view class="custom-title-bar">
			<uv-icon class="goBack" name="arrow-left" color="#999" size="22" @click="goBack"></uv-icon>
			<view class="title-text">查看</view>
		</view>
		
		<view class="flex-col fill-width-height">
			<view class="fill-width flex-row justify-center" style="min-height: 230px;padding-top: 10rpx;height: 100%;">
				<scroll-view
					class="fill-height overflow-hidden" 
					scroll-y 
					lower-threshold="20" 
				>
					<swiper class="swiper-container" :autoplay="false" :circular="true" :current="currentIndex" @change="onSwiperChange">
						<swiper-item v-for="(itemUrl, index) in imageUrlList" :key="index" class="fill-width swiper_item">
							<uv-image
								v-if="fileId.length > 0"
								mode="aspectFit"
								height="100%"
								:src="itemUrl"
								:customStyle="{ margin: '0 auto',width: '100%'}"
								:lazy-load="true"
								:observeLazyLoad="true"
								:showMenuByLongpress="false"
							>
								<template v-slot:error>
									<view style="font-size: 24rpx;">加载失败</view>
								</template>
								<template v-slot:loading>
									<uv-loading-icon color="#999"></uv-loading-icon>
								</template>
							</uv-image>
						</swiper-item>
					</swiper>
				</scroll-view>
			</view>
			<view class="flex-row justify-center" style="gap: 10px;padding: 10px;">
				<uv-button type="primary" text="发送" @click="send"></uv-button>
				<uv-button type="success" text="下载" @click="down"></uv-button>
				<uv-button type="warning" text="收藏" @click="collect"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import viewDetailsLogic from "./viewDetailsLogic"
	export default {
		mixins: [viewDetailsLogic]
	}
</script>

<style lang="scss" scoped>
.custom-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
	height: 12%;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	padding: 0 20rpx;
	padding-top: 20px;
    .goBack {
        margin-right: 20rpx;
    }
    .title-text {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }
}
:deep(.swiper-container){
	height: 100%;
}
:deep(swiper-item) > view{
	width: 100%;
	height: 100%;
}
:deep(.uv-image){
	width: 100%;
	height: 100% !important;
}
:deep(.uv-image__loading){
	width: 100%;
	height: 100%;
}
:deep(.swiper-container){
	width: 100%;
	height: 100%;
}
:deep(swiper-item view view) {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
</style>
